<template>
<div class="save-wrapper ui container">

    <div class="ui ordered steps mini">
        <div class="step" :class="{active: activeTag.tab.id == id}" v-for="{id, text, options=null} in tabs">
            <div class="content">
                <div class="title">{{text}}
                    <select class="ui dropdown button" v-if="options">
							<option class="item" :value="value" v-for="{value, text} in options">{{text}}</option>
					 </select>
                </div>
            </div>
        </div>
    </div>
    <div class="ui segment">
        <component :is='activeTag.components_name' @onchange="onchange" :params="params" :op='op'></component>
    </div>
    <div class="pc-actions">
        <step-action @sclick="sclick" ref="stepAction" :sconfig="sconfig"></step-action>
    </div>
</div>
</template>
<script type="text/ecmascript-6">
import fselect from 'components/form/select'
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';
import stepAction from 'components/edit/addProduct/stepAction';
import QdBase from 'components/edit/Qd/base'
import QdBind from 'components/edit/Qd/bind'


export default {
    data() {
        return {
            sconfig: {
                pre: {
                    disabled: true,
                },
                next: {
                    disabled: false
                },
				buttonHide:true,
                save: {
                    disabled: true
                },
                cancel: {}
            },
			params:{
				id:'',
				name:'',//姓名
				uname:'',//对接人姓名
				city_code:'',//城市
				tags:'',//场景标签
				fws_id:'',//服务商id
				saas_id:'',//招募人id
				pid:'',//会话商品id
				hotel_id:'',//场景id
				is_qucik_bind:'0',//是否快速绑定
				tzu_id:'',//服务者id
				model_scode:'',//模板渠道码
				scode:''//渠道码
			},
            activeTag: {
                index: 0,
                tab: {},
                components_name: ""
            },
            tabs: [{
                    id: 0,
                    text: "基本信息",
                },
                {
                    id: 1,
                    text: "绑定信息",
                }
            ],
            tabStatus: {},
            componentsList: {
                "0": "QdBase",
                "1": "QdBind",
            },
        }
    },
    watch: {
        "activeTag.index": function(val, oldval) {
            this.sconfig.pre.disabled = val == 0;
            this.sconfig.save.disabled = val != this.tabs.length - 1;
            this.sconfig.next.disabled = val == this.tabs.length - 1;
            this.activeTag.tab = this.tabs[val];
            this.activeTag.components_name = this.componentsList[this.activeTag.tab.id];
        }
    },
    methods: {
		onchange({
			name,
			data
		}) {
			this.params[name] = data;
		},
        onSubmit() {

        },
		initData(){
			this.$nextTick(() => {
				this.stepInit();
				if(this.op=='insert'){
					//DO insert
				}else{
					this.getParams()
				}
			});

		},
		getParams(){
			let components_name = this.activeTag.components_name;
			this.activeTag.components_name = ''
			util.http.getDataCom(this, '/index/Qd/read', {
				id:this.$route.query._id
			},(rs) => {
				Object.keys(this.params).forEach(key=>{
					this.params[key] = tool.nullToSpace(rs[key])
				})
				this.activeTag.components_name = components_name;
                util.store.commit(this,'setEditVoContact', {
					  tags_names:rs.tags_names,
					  fws_name:rs.fws_name,
					  saas_name:rs.saas_name
				})
			})
		},
        /*设置步骤*/
        stepInit() {
            this.activeTag.index = 0;
            this.activeTag.tab = this.tabs[0];
            this.activeTag.components_name = this.componentsList[this.tabs[0].id];
            this.tabs.forEach((_, i) => {
                this.tabStatus[i] = i < 10;
            });
        },
        sclick({
            type = ""
        }) {
            if (type == "cancel") {
                this.$router.go(-1);
                return;
            }
			let next = true;
			[{key:'name',lable:'姓名'},{key:'uname',lable:'对接人姓名'}].forEach(item=>{
				if(this.params[item.key].length==''){
					util.showMsg(this, 'error', `${item.lable}为必填`);
					next = false;
					return
				}
			})
			if(!next){return}
            //TODO:校验必填数据
            if (type == "save") {
                this.onSubmit();
                return;
            }
            if (type == "pre") {
                this.activeTag.index--;
            }
            if (type == "next") {
                this.activeTag.index++;
            }
        },
    },
    computed: {
		op() {
            return util.getOp(this)
        },
    },
    components: {
        stepAction,
        QdBase,
        QdBind
    },
    created() {
		this.initData()
    }
}
</script>
<style rel="stylesheet/less" scoped lang="less">
@import "../../common/style/mixin";
@dir: "edit/";
.circular {
    width: 60px;
    //margin-left: 10px;
}
.pc-actions {
    position: fixed;
    left: 210px;
    right: 20px;
    bottom: 10px;
    padding-top: 10px;
    background: linear-gradient(0deg,#fff 0,hsla(0,0%,100%,0));
}
form {
    .submitBtn();

}
</style>
